<template>
	<div class="overview">
		<list-title :data="header"></list-title>
		<list-table :list="instanceList" :tableLoading="tableLoading" :footer="false">
			<template v-slot:data>
				<el-table-column prop="app_name" label="应用名称"></el-table-column>
				<el-table-column prop="appid" label="APPID">
					<template slot-scope="scope">
						<el-popover
						placement="right"
						title="APPSECRET"
						width="310"
						trigger="click"
						:content="scope.row.appsecret">
						<el-button slot="reference" type='text'>{{ scope.row.appid }}</el-button>
						</el-popover>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="appsecret" label="APPSECRET"></el-table-column> -->
				<el-table-column prop="state" label="状态" width="50px">
					<template slot-scope="scope">
						<span v-if='scope.row.state == 0'>正常</span>
						<span v-if='scope.row.state == 1'>到期</span>
						<span v-if='scope.row.state == 2'>暂时关闭</span>
					</template>
				</el-table-column>
				<el-table-column prop="expire_time" label="到期时间" width="150px"></el-table-column>
				<el-table-column prop="add_time" label="产生时间" width="150px"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="manage(scope.$index, scope.row)" v-if="auth.manage">管理</el-button>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {getNavbarByMenuList, judgeAuth} from "static/js/common.js"
import {SEC_NAVBAR_CMS} from '@/config/backArgs.js'
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '实例列表',
				reload: true,
			},
			auth: {
				manage: false//管理
			},
			/*列表数据*/
			instanceList: [
				// {
				// 	opened_id: 1,
				// 	app_name: '应用名称',
				// 	describe: '描述',
				// 	appid: '',
				// 	appsecret: '',
				// 	state: '',
				// 	close_reason: '',
				// 	expire_time: '',
				// 	add_time: '',
				// },
			],
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*获取列表数据*/
		this.getInstanceList()
		/*权限判断显示*/
		this.auth.manage = (judgeAuth(SEC_NAVBAR_CMS.curr_menu_id, this.allMenuList) == undefined)?false:true
	},
	methods: {
		/*获取列表数据*/
		getInstanceList: function(){
			this.$baseURL(this.$domain.cms)
			this.$get(this.$api.cmsInstanceList).then(res => {
				// console.log(res);
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.instanceList = []
						Object.keys(res.data.data).forEach((k) => {
							this.instanceList.push ({
								opened_id: res.data.data[k].opened_id,
								app_name: res.data.data[k].app_name,
								describe: res.data.data[k].describe,
								appid: res.data.data[k].appid,
								appsecret: res.data.data[k].appsecret,
								state: res.data.data[k].state,
								close_reason: res.data.data[k].close_reason,
								expire_time: res.data.data[k].expire_time,
								add_time: res.data.data[k].add_time,
							});
						})
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*管理*/
		manage(index, row) {
			// console.log(this.$route.path);
			this.$router.push({
				name: SEC_NAVBAR_CMS.routerto,
				query: {
					'appid': row.appid
				}
			})
			let navbarBack = getNavbarByMenuList(this.allMenuList, SEC_NAVBAR_CMS.curr_menu_id)//39是在数据库中查看的
			this.setNavbar({title: 'back', list: navbarBack, routerName: SEC_NAVBAR_CMS.backrouter})//把 navbar数据 存入vuex
			this.$localstorage.set('navbarBack', JSON.stringify(
				{
					menuID: SEC_NAVBAR_CMS.curr_menu_id, //刷新的时候，Sidebar组件 取此值
					routerName: SEC_NAVBAR_CMS.backrouter, //刷新的时候，Sidebar组件 取此值
					currNavbarID: parseInt(this.$localstorage.get('currNavbarID')),//为了返回后，能够高亮当前navbar
					appID: row.appid//关闭浏览器，重启输入网址进入登录页面，如果没有此值，将取不到相应数据，navbar组件将先到地址栏获取参数，再到这里取值
				}
			));//保存navbar组件的返回路由名称、当前的父ID

			/*记录跳转到最近打开的实例 方便再次登录的时候，直接调转到此处*/
			var lastUrl = "/#/pc/cms/instance/Manage?appid=" + row.appid;
			// console.log(lastUrl);
			this.$localstorage.set('lastUrl', lastUrl)//保存最后点击的应用，为了保存上次的的应用
			this.$localstorage.set('currAppName', row.app_name)//保存实例名称，为了进去后，知道操作的哪个实例
		},
		...mapMutations({
			setNavbar: 'setNavbar'
		})
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
</style>